<template>
	<view class="index-box" :style="{ '--color': vuex_config.themeColor1,'--price':vuex_config.price }">

		<!-- #ifndef  MP-ALIPAY -->
		<sww-nav-bar title="订单" v-if="!noNav"></sww-nav-bar>
		<!-- #endif -->
		<!--顶部tab-->
		<u-sticky :h5-nav-height="0" :offset-top="offsetTop" :enable="enableSticky">
			<view class="tab-box">
				<view class="tab-list">
					<block v-for="(item, index) in tabList" :key="index">
						<view class="tab-item" @click="$onTabClick(index)">
							<view :class="['tab-icon', 'iconfont', 'iconfont-' + item.icon]"></view>
							<view class="tab-text">{{ item.name }}</view>
						</view>
					</block>
				</view>
				<view class="tab-line" :style="tabLineLeft"></view>
			</view>
		</u-sticky>
		<template v-if="vuex_user.pk_id ? true : false">
			<view class="data-list">
				<block v-for="(item, index) in dataList" :key="index">
					<view class="data-item">
						<view class="data-top u-border-bottom">
							<view class="">订单号：{{ item.order_no }}</view>
							<view class="sww-tp">{{ item | statusFilter }}</view>
						</view>
						<template v-if="item.type !== 3">
							<template v-for="(prodItem, prodIndex) in item.detailed">
								<view v-if="prodIndex < 3 || item.show" class="data-center" @click="goOrderDetail(item)"
									:key="prodIndex">
									<image class="data-img"
										:src="(prodItem.product_img || vuex_config.errImg).split(',')[0]"
										mode="aspectFill"></image>
									<view class="data-right">
										<view class="data-name u-line-1">
											{{ prodItem.fk_product_id>0?prodItem.product_name:'线下收款' }}
										</view>
										<view class="data-desc u-line-2">{{ prodItem.detailed_name || '' }}</view>
										<view class="price_main">
											<view class="data-price">
												<text class="u-font-26">￥</text>
												<text
													class="u-font-34">{{ $price(prodItem.price) | priceFmt(false) }}</text>
												<text
													class="u-font-26">{{ $price(prodItem.price) | priceFmt(true) }}</text>
											</view>
											<view class="buy_num">x {{ prodItem.num || 1 }}</view>
										</view>
									</view>
								</view>
							</template>
						</template>
						<template v-else>
							<!-- 酒店订单 -->
							<template v-for="(prodItem, prodIndex) in item.detailed">
								<view v-if="prodIndex < 3 || item.show" class="no_img_main" :key="prodIndex"
									@click="goOrderDetail(item)">
									<view class="no_l u-line-2">{{ prodItem.product_name }}</view>
									<view class="no_r">
										<view class="no_price">
											<text class="u-font-26">￥</text>
											<text
												class="u-font-34">{{ $price(prodItem.price) | priceFmt(false) }}</text>
											<text class="u-font-26">{{ $price(prodItem.price) | priceFmt(true) }}</text>
										</view>
										<view class="buy_num">x {{ prodItem.num || 1 }}</view>
									</view>
								</view>
							</template>
						</template>
						<view @click="showMOre(index)" class="more" v-if="item.detailed && item.detailed.length > 3">
							<view class="iconfont iconfont-e772" :class="[item.show ? 'show_more' : '']"></view>
						</view>

						<view class="u-m-t-20 u-m-b-20 u-flex" style="justify-content: flex-end;">
							<view>
								<text class="no_text">总价</text>
								<text class=" no_price u-font-23">￥</text>
								<text class="no_price">{{(item.coupon + item.total_amount).toFixed(2)}}</text>
							</view>
							<view class="u-m-r-20 u-m-l-20">
								<text class="no_text">优惠</text>
								<text class=" no_price u-font-23">￥</text>
								<text class="no_price">{{(item.coupon).toFixed(2) }}</text>
							</view>
							<view>
								<text class="no_text">实付款</text>
								<text class=" no_price u-font-23">￥</text>
								<text class="no_price">{{(item.total_amount).toFixed(2) }}</text>
							</view>
						</view>
						<!--  v-if="item.pay_status != '2'" -->
						<view class="data-bottom">
							<view class="btn_cont" v-if="checkBtn(item, -1)">
								<button class="data-btn u-border" @click="$onCancel(item.pk_id, index,item.type)">取消订单</button>
							</view>
							<view class="btn_cont" v-if="judegAddressinUserinfo(item)">
								<button class="data-btn u-border" @click="onModifyOrder(item)">修改订单</button>
							</view>
							<view class="btn_cont" v-if="checkBtn(item, 0)">
								<button class="data-btn u-border" @click="$onPayOrder(item,1)">立即支付</button>
							</view>
							<view class="btn_cont" v-if="checkBtn(item, 1)">
								<button class="data-btn u-border" @click="$onValidate(item)">核销二维码</button>
							</view>
							<view class="btn_cont" v-if="productRefund(item)">
								<button class="data-btn u-border" @click="$openRefund(item)">{{item.pay_status == 1?'申请退款':'退款退货'}}</button>
							</view>
							<view class="btn_cont" v-if="checkBtn(item, 4)">
								<button class="data-btn u-border" @click="goOrderDetail(item)">评价</button>
							</view>
							<view class="btn_cont" v-if="checkBtn(item, 3)">
								<button class="data-btn u-border" @click="$linkToLogistic(item)">查看物流</button>
							</view>
							<view class="btn_cont" v-if="checkBtn(item, 5)">
								<button class="data-btn u-border" @click="$confirmGood(item)">确定收货</button>
							</view> 
							<view class="btn_cont" v-if="checkBtn(item, 6)">
								<button class="data-btn u-border" @click="$invite(item)">邀请好友</button>
							</view>
							<view class="btn_cont" v-if="checkBtn(item, 8)">
								<button class="data-btn u-border" @click="$onOrder(item.pk_id)">继续点餐</button>
							</view>
							<!-- <block v-if="checkBtn(item, 7)"><button class="data-btn u-border" open-type="contact" @click="$callContact">拨打客服</button></block> -->
						</view>
					</view>
				</block>
			</view>
			<sww-load-more :params="dataListParams" @load="$loadMore">
				<view class="no-data-box">
					<view class="no-data-img iconfont iconfont-e645"></view>
					<view class="no-data-text">您当前没有订单呢</view>
				</view>
			</sww-load-more>
		</template>
		<sww-pay-class :isBalance="isBalance" :billType="2" ref="payCheck" @callBack="onPayPrice"></sww-pay-class>
		<sww-login></sww-login>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		pagingMixin
	} from '@/mixins/pagingMixin';
	import {
		getMoment
	} from '@/utils/moment';
	import {
		orderjs
	} from './orderjs.js';
	import {
		payOrder
	} from '@/mixins/payOrder.js'
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	export default {
		mixins: [pagingMixin, orderjs, payOrder, wxConfig],
		props: {
			noNav: {
				type: Boolean,
				default: false
			}, // 是否没有导航栏
		},
		data() {
			return {
				tabList: [{
						name: '全部',
						type: null,
						icon: 'e635'
					},
					{
						name: '待支付',
						type: '0',
						icon: 'e60e'
					},
					{
						name: '已支付',
						type: '1',
						icon: 'e62f'
					},
					{
						name: '待收货',
						type: '4',
						icon: 'e723'
					},
					{
						name: '待评价',
						type: '11',
						icon: 'e744'
					},
					{
						name: '退款/售后',
						type: '2',
						icon: 'e670'
					}
				],
				tabAct: 0,
				one: true,
				enableSticky: true, // 是否开启吸顶功能
			};
		},
		filters: {
			// 取小数点前还是后的数字
			priceFmt(price, isPoint = false) {
				let [priceInt, pricePoint] = price.split('.');
				return isPoint ? (pricePoint ? '.' + pricePoint : '') : priceInt;
			},
		},
		computed: {
			...mapState(['vuex_system']),
			offsetTop() {
				if (!this.noNav) {
					// #ifdef H5 || APP-PLUS
					return 0;
					// #endif
					// #ifndef H5 || APP-PLUS
					return this.$formatPx(this.vuex_system.top);
					// #endif
				} else {
					return 0
				}
			},
			tabLineLeft() {
				// let str=`left: ${10 + this.tabAct * 20}%;`
				// if(this.vuex_config.showOrderRefund){
				let str = `left: ${8 + this.tabAct * 17}%;`
				// }
				return str;
			},
		},
		methods: {
			$onShow() {
				// 订阅消息进来有可能没有登录
				this.$login('init', null, 'goBack').then(() => {
					this.init();
				});
			},
			onModifyOrder(row) {
				let url = `/package/order/modifyOrder/index?pk_id=${row.pk_id}`
				if (row.type == 7 && !row.name) { //餐饮桌号埋单是没有手机姓名地址的，所以要去掉 传值过去就相当于不需要 
					url += `&judegAddress=1&judegName=1&judegPhone=1`
				} else if (row.type == 2 || row.type == 3 || row.type == 4) {
					url += `&judegAddress=1`
				} else if (row.type == 5) {
					url += `&judegAddress=1&judegName=1`
				}



				this.$to(url)
			},
			init() {
				this.$initPage();
				uni.pageScrollTo({
					scrollTop: 0
				});
				// #ifdef H5 || APP-PLUS
				this.enableSticky = true;
				// #endif
				// #ifdef H5
				this.initWxConfig(['chooseWXPay']).then(() => {}).catch(() => {});
				// #endif
			},
			goBack() {
				this.uniBack();
			},
			$onHide() {
				// #ifdef H5 || APP-PLUS
				this.enableSticky = false;
				// #endif
			},
			$onReachBottom() {
				this.$loadMore();
			},
			//tab切换
			$onTabClick(index) {
				this.$u.throttle(() => {
					if (this.tabAct !== index) {
						this.tabAct = index;
						this.$initPage();
					}
				});
			},
			// 初始化数据
			$initPage() {
				this.dataList = [];
				this._init_data(
					'GetUsersOrderList', {
						status: this.tabList[this.tabAct].type
					}, {
						callBack: this.$formatData
					}
				);
			},
			//分页加载
			$loadMore() {
				this._load_data({
					callBack: this.$formatData
				});
			},
			// 格式化数据
			$formatData(list) {
				let nowTime = new Date().getTime();
				return list.map(item => {
					item.show = false;
					let time = getMoment(item.date_creation, 'YYYY/MM/DD HH:mm:ss').valueOf();
					if (item.pay_status == '0') {
						if (item.type == 14) {
							// 待支付且超过半小时
							item.pay_status = nowTime - time >= 30 * 60 * 1000 ? '-1' : '0';
						} else {
							// 待支付且超过两个小时
							item.pay_status = nowTime - time >= 2 * 60 * 60 * 1000 ? '-1' : '0';
						}
					}
					return item;
				});
			},
			// 展开查看更多
			showMOre(index) {
				this.dataList[index].show = this.dataList[index].show ? false : true;
			},
			// 跳转订单详情
			goOrderDetail(item) {
				if (item.type == 1) {
					this.$to(`/package/order/detail/prodOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 3) {
					this.$to(`/package/order/detail/hotelOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 5) {
					this.$to(`/package/order/detail/videoOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 8) {
					this.$to(`/package/order/detail/integralOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 6) {
					this.$to(`/package/order/detail/vipOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 7) {
					this.$to(`/package/order/detail/restaurantOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 9) {
					this.$to(`/package/order/detail/groupOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 4) {
					this.$to(`/package/order/detail/lineOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 2) {
					this.$to(`/package/order/detail/ticketOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 12) {
					this.$to(`/package/order/detail/vipOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 14) {
					this.$to(`/package/order/detail/auctionOrderDetail?id=${item.pk_id}`);
				} else if (item.type == 17) {
					this.$to(`/package/order/detail/productPackage?id=${item.pk_id}`);
				}else {
					// this.$toast({
					// 	title: '暂无匹配的订单详情'
					// });
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.index-box {
		width: 100%;
		height: auto !important;
		min-height: 100%;
		background-color: #f5f5f5;

		/* 顶部tab */
		.tab-box {
			width: 100%;
			position: relative;

			.tab-list {
				width: 100%;
				height: 154rpx;
				background-color: #ffffff;
				display: flex;

				.tab-item {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.tab-icon {
						width: 48rpx;
						height: 48rpx;
						font-size: 52rpx;
						color: #333;
					}

					.tab-text {
						font-size: 26rpx;
						margin-top: 20rpx;
					}
				}
			}

			.tab-line {
				width: 60rpx;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: var(--color);
				position: absolute;
				bottom: 0;
				left: 10%;
				transform: translate(-50%, 0);
				transition: all 0.3s;
			}
		}

		/* 数据列表 */
		.data-list {
			width: 100%;
			font-size: 26rpx;

			.data-item {
				width: 100%;
				background-color: #ffffff;
				padding: 0 24rpx 1rpx;
				margin-top: 16rpx;

				.data-top {
					width: 100%;
					height: 84rpx;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.data-center {
					width: 100%;
					margin-bottom: 20rpx;
					display: flex;

					.data-img {
						width: 200rpx;
						height: 200rpx;
						margin-right: 24rpx;
						border-radius: 16rpx;
						box-shadow: 0 0 5rpx #eeeeee;
					}

					.data-right {
						height: 200rpx;
						flex: 1;
						overflow: hidden;
						display: flex;
						flex-direction: column;

						.data-name {
							padding-top: 10rpx;
						}

						.data-desc {
							font-size: 26rpx;
							color: #999;
							margin-top: 10rpx;
						}

						.price_main {
							padding-top: 6rpx;
							margin: auto 0;
							display: flex;
							align-items: center;

							.data-price {
								color: var(--price);
								flex: 1;
								overflow: hidden;
							}
						}
					}
				}

				.buy_num {
					color: #999;
					font-size: 30rpx;
				}

				.no_img_main {
					display: flex;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #f5f5f5;
					padding-top: 20rpx;

					&:first-of-type {
						padding-top: 0;
					}

					&:last-of-type {
						border-bottom: 0;
					}

					.no_l {
						flex: 1;
						overflow: hidden;
						line-height: 40rpx;
						font-size: 26rpx;
						height: 80rpx;
					}

					.no_r {
						margin-left: 40rpx;
						text-align: right;
					}
				}

				.more {
					padding-bottom: 20rpx;
					text-align: center;
					display: flex;
					justify-content: center;

					.iconfont {
						transition: all 0.3s;
					}

					.show_more {
						transform: rotate(180deg);
					}
				}

				.data-bottom {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					// padding-bottom: 20rpx;
					.btn_cont{
						padding-bottom: 20rpx;
					}
					.data-btn {
						min-width: 140rpx;
						padding: 0 12rpx;
						font-size: 24rpx;
						color: #999999;
						margin-left: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						line-height: 46rpx;
						margin-right: 0;
						background-color: inherit;

						&::after {
							border-radius: 22rpx;
							border-color: #999999;
						}

						&:last-child {
							background-color: var(--color);
							color: #ffffff;
							border-radius: 11rpx;
							line-height: 50rpx;

							&::after {
								border: none;
							}
						}
					}
				}
			}
		}

		.no-data-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.no-data-img {
				width: 415rpx;
				height: 321rpx;
				font-size: 150rpx;
			}

			.no-data-text {
				font-size: 26rpx;
				color: #999999;
			}
		}

		.no_price {
			color: var(--price);
		}

		.no_text {
			color: #999;
		}
	}
</style>
